<!--
 * @Description: 菜单
 * @Author: charles
 * @Date: 2021-08-18 11:32:34
 * @LastEditors: charles
 * @LastEditTime: 2021-08-19 11:46:13
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>菜单</title>
  <style>
    html {
      font: normal normal 12px 'Microsoft Yahei','微软雅黑';
    }
    body {
      margin:0;
    }
    ul,ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .wrapper {
      width: 1080px;
      margin: 0 auto;
    }
    /* 头部 */
    .header {
      background-color: #333;
      color: #f4f4f4;
    }
    .header > .wrapper {}
    .header .note {
      line-height: 3em;
    }
    .header ul.menu {
      float: right;
    }
    .header ul.menu li {
      cursor: pointer;
    }
    .header ul.menu >li {
      float: left;
      line-height: 3em;
      padding: 0 1em;
      position: relative;
    }
    .header ul.menu >li > .line {
      width: 1px;
      height: 12px;
      background-color: #f4f4f4;
      display: inline-block;
      vertical-align: middle;
      margin-left: 2em;
    }
    .header ul.menu >li:hover .sub_menu_container {
      display: block;
    }
    .header ul.menu .sub_menu_container {
      box-sizing: border-box;
      display: none;
      position: absolute;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      width: 100%;
      color: #999;
      text-align: center;
      padding: 0 .5em;
      left: 0;
    }
    .header ul.menu .sub_menu_container .icon_sj {
      position: absolute;
      background-color: #fff;
      width: 10px;
      height: 10px;
      left: 50%;
      margin-left: -5px;
      top: -5px;
      transform: rotate(45deg);
    }
    .header ul.menu .sub_menu_container .sub_menu >li:not(:last-child) {
      border-bottom: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="wrapper">
        <!-- 菜单 -->
        <ul class="menu">
          <li>登录/注册 <span class="line"></span></li>
          <li>我的订单  <span class="line"></span></li>
          <li>会员  <span class="line"></span></li>
          <li>甄选家  <span class="line"></span></li>
          <li>企业订单  <span class="line"></span></li>
          <li>
            <span>客户服务</span>
            <div class="sub_menu_container">
              <div class="icon_sj"></div>
              <ul class="sub_menu">
                <li>在线客服</li>
                <li>帮助中心</li>
                <li>上午合作</li>
                <li>开放平台</li>
              </ul>
            </div>
          </li>
          <li>APP</li>
        </ul>
        <!-- 公告 -->
        <div class="note">
          因事件（疫情、特大暴雨）影响，部分地区无法配送公告
        </div>
      </div>
    </div>

  </div>
</body>
</html>